<template>
  <div class="layout">
    <nav class="top-navbar">
      <div class="navbar-left">
        <div class="brand-container">
          <img src="@/assets/logo.jpg" alt="星选优洗" class="logo" />
          <h1 class="system-name">星选优洗运营平台</h1>
        </div>
      </div>
      <div class="navbar-right">
        <div class="user-info">
          <div class="avatar-container">
            <img v-if="adminInfo.avatar" :src="adminInfo.avatar" alt="头像" class="avatar" />
            <div class="status-indicator"></div>
          </div>
          <div class="user-meta">
            <p class="username">{{ adminInfo.username }} 管理员</p>
            <p class="welcome-text">{{ dynamicWelcomeText }}，祝您工作顺利！</p>
          </div>
        </div>
        <button class="logout" @click="confirmLogout">
          <i class="fas fa-sign-out-alt icon-logout"></i>
          <span class="logout-text">退出系统</span>
        </button>
      </div>
    </nav>

    <div class="main-content">
      <aside class="sidebar" :class="{ collapsed: isCollapsed }">
        <div class="toggle-btn" @click="toggleSidebar">
          <i :class="isCollapsed ? 'fas fa-angle-right' : 'fas fa-angle-left'"></i>
        </div>
        <nav>
          <ul>
            <li>
              <router-link to="/admin/dashboard" @click="closeSubMenu" class="menu-item">
                <i class="fas fa-chart-pie icon-home"></i>
                <span v-show="!isCollapsed" class="menu-text">数据概览</span>
              </router-link>
            </li>
            <li class="menu-group">
              <a href="javascript:void(0);" @click="toggleOrderManagement" class="menu-item">
                <i class="fas fa-clipboard-list icon-order"></i>
                <span v-show="!isCollapsed" class="menu-text">订单管理</span>
                <span v-show="!isCollapsed" class="toggle-icon">{{ isOrderManagementOpen ? '−' : '+' }}</span>
              </a>
              <transition name="slide">
                <ul v-if="isOrderManagementOpen" class="submenu">
                  <li>
                    <router-link to="/admin/order-management/self-service" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">平台自营订单</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/admin/order-management/merchant" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">加盟商家订单</span>
                    </router-link>
                  </li>
                </ul>
              </transition>
            </li>
            <li>
              <router-link to="/admin/earnings-management" @click="closeSubMenu" class="menu-item">
                <i class="fas fa-coins icon-finance"></i>
                <span v-show="!isCollapsed" class="menu-text">收益报表</span>
              </router-link>
            </li>
            <li class="menu-group">
              <a href="javascript:void(0);" @click="toggleRoleManagement" class="menu-item">
                <i class="fas fa-user-shield icon-role"></i>
                <span v-show="!isCollapsed" class="menu-text">角色管理</span>
                <span v-show="!isCollapsed" class="toggle-icon">{{ isRoleManagementOpen ? '−' : '+' }}</span>
              </a>
              <transition name="slide">
                <ul v-if="isRoleManagementOpen" class="submenu">
                  <li>
                    <router-link to="/admin/self-service" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">自助点管理</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/admin/merchant-management" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">商家管理</span>
                    </router-link>
                  </li>
                  <li v-if="isSuperAdmin">
                    <router-link to="/admin/admin-management" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">管理员管理</span>
                    </router-link>
                  </li>
                  <li v-if="isSuperAdmin">
                    <router-link to="/admin/user-management" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">用户管理</span>
                    </router-link>
                  </li>
                </ul>
              </transition>
            </li>
            <li v-if="isSuperAdmin">
              <router-link to="/admin/laundry-option-management" @click="closeSubMenu" class="menu-item">
                <i class="fas fa-sliders-h icon-settings"></i>
                <span v-show="!isCollapsed" class="menu-text">服务配置</span>
              </router-link>
            </li>
            <li v-if="isSuperAdmin" class="menu-group">
              <a href="javascript:void(0);" @click="toggleOperationManagement" class="menu-item">
                <i class="fas fa-photo-video icon-image"></i>
                <span v-show="!isCollapsed" class="menu-text">运营展示</span>
                <span v-show="!isCollapsed" class="toggle-icon">{{ isOperationManagementOpen ? '−' : '+' }}</span>
              </a>
              <transition name="slide">
                <ul v-if="isOperationManagementOpen" class="submenu">
                  <li>
                    <router-link to="/admin/carousel-management" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">轮播图管理</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/admin/laundry-tip-management" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">洗护小知识</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/admin/forum-management" @click="closeSubMenu" class="submenu-item">
                      <span class="dot-indicator"></span>
                      <span v-show="!isCollapsed" class="menu-text">论坛管理</span>
                    </router-link>
                  </li>
                </ul>
              </transition>
            </li>
            <li>
              <router-link to="/admin/device-management" @click="closeSubMenu" class="menu-item">
                <i class="fas fa-microchip icon-device"></i>
                <span v-show="!isCollapsed" class="menu-text">设备监控</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/rental-management" @click="closeSubMenu" class="menu-item">
                <i class="fas fa-hand-holding-usd icon-rental"></i>
                <span v-show="!isCollapsed" class="menu-text">租赁管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/admin-settings" @click="closeSubMenu" class="menu-item">
                <i class="fas fa-user-cog icon-user"></i>
                <span v-show="!isCollapsed" class="menu-text">个人中心</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </aside>

      <main class="content" :style="{ marginLeft: isCollapsed ? '60px' : '220px' }">
        <section class="page">
          <router-view />
        </section>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOrderManagementOpen: false,
      isRoleManagementOpen: false,
      isOperationManagementOpen: false,
      isCollapsed: false,
    };
  },
  computed: {
    adminInfo() {
      return this.$store.state.adminInfo || { username: '管理员', role: '', avatar: '' };
    },
    isSuperAdmin() {
      return this.adminInfo.role === 'super';
    },
    dynamicWelcomeText() {
      const hour = new Date().getHours();
      if (hour >= 5 && hour < 9) return '早上好';
      if (hour >= 9 && hour < 12) return '上午好';
      if (hour >= 12 && hour < 18) return '下午好';
      return '晚上好';
    },
  },
  methods: {
    toggleOrderManagement() {
      if (this.isCollapsed) {
        this.isCollapsed = false;
      }
      this.isOrderManagementOpen = !this.isOrderManagementOpen;
    },
    toggleRoleManagement() {
      if (this.isCollapsed) {
        this.isCollapsed = false;
      }
      this.isRoleManagementOpen = !this.isRoleManagementOpen;
    },
    toggleOperationManagement() {
      if (this.isCollapsed) {
        this.isCollapsed = false;
      }
      this.isOperationManagementOpen = !this.isOperationManagementOpen;
    },
    closeSubMenu() {
      this.isOrderManagementOpen = false;
      this.isRoleManagementOpen = false;
      this.isOperationManagementOpen = false;
    },
    confirmLogout() {
      if (confirm('确定要退出登录吗？')) {
        this.logout();
      }
    },
    logout() {
      this.$store.dispatch('logout');
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('adminInfo');
      window.location.replace('/');
    },
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
  background: #f8fafc;
  overflow: hidden;
}

.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background: #1F2937;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.system-name {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.status-indicator {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  background: #10B981;
  border: 2px solid #1F2937;
  border-radius: 50%;
}

.user-meta {
  color: #ffffff;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #E5E7EB;
}

.welcome-text {
  font-size: 12px;
  color: #9CA3AF;
}

.logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: #E5E7EB;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.main-content {
  display: flex;
  height: calc(100vh - 64px);
  margin-top: 64px;
  overflow: hidden;
}

.sidebar {
  flex: 0 0 220px;
  background: #2D3748;
  padding: 12px 0;
  position: fixed;
  top: 64px;
  bottom: 0;
  transition: width 0.3s ease;
  width: 220px;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

.sidebar.collapsed {
  width: 60px;
}

.toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  margin: 6px auto;
  cursor: pointer;
  color: #9CA3AF;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background: #4B5563;
  color: #3B82F6;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #E5E7EB;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  border-radius: 6px;
  margin: 2px 8px;
}

.menu-item:hover {
  background: #4B5563;
  color: #3B82F6;
}

.menu-item.router-link-active {
  background: #4B5563;
  color: #3B82F6;
  font-weight: 600;
}

.menu-item.router-link-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 3px;
  background: #3B82F6;
  border-radius: 0 4px 4px 0;
}

.sidebar.collapsed .menu-item {
  padding: 10px 0;
  margin: 2px 0;
  justify-content: center;
}

.submenu {
  background: #4B5563;
  padding: 6px 0;
  margin-left: 24px;
  border-left: 1px solid #6B7280;
  position: relative;
  z-index: 10;
}

.submenu-item {
  padding: 8px 20px;
  font-size: 13px;
  color: #D1D5DB;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 11;
}

.submenu-item:hover {
  color: #3B82F6;
  background: #718096;
}

.submenu-item.router-link-active {
  color: #3B82F6;
  background: #718096;
}

.toggle-icon {
  margin-left: auto;
  font-size: 14px;
  color: #9CA3AF;
}

[class^="icon-"] {
  width: 18px;
  font-size: 16px;
  color: #9CA3AF;
  transition: color 0.2s ease;
}

.menu-item:hover [class^="icon-"] {
  color: #3B82F6;
}

.content {
  flex: 1;
  background: #FFFFFF;
  padding: 24px;
  overflow-y: auto;
  transition: margin-left 0.3s ease;
}

.page {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 96px);
  padding: 20px;
}

.slide-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-leave-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.dot-indicator {
  width: 6px;
  height: 6px;
  background: #9CA3AF;
  border-radius: 50%;
  margin-right: 10px;
}

.router-link-active .dot-indicator {
  background: #3B82F6;
}

.icon-tips {
  width: 18px;
  font-size: 16px;
  color: #9CA3AF;
  transition: color 0.2s ease;
}

.menu-item:hover .icon-tips {
  color: #3B82F6;
}
</style>